<!--  -->
<template>
  <u-search
    :class="styleName"
    :placeholder="placeholder"
    v-model="kk"
    :clearabled="true"
    :show-action="showAction"
    :search-icon-color="iconColor"
    :bg-color="bgColor"
    :height="height"
    @change="changeHandle"
    @search="searchHandle"
    @clear="clearHandle"
    @blur="blurHandle"
    @custom="customHandle"
    @focus="focusHandle"
    @click="jump"
  ></u-search>
</template>
<script>
export default {
  name: "cSearch",
  props: {
    //样式
    styleName: {
      type: String,
      default: "name"
    },
    //placeholder值
    placeholder: {
      type: String,
      default: "请输入关键字搜索"
    },
    keywords: [String],
    //是否显示清除按钮
    clearabled: {
      type: Boolean,
      default: true
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {

  },

  data () {
    return {
      kk: '',
      // keyword: "",
      showAction: false,
      iconColor: "",
      height: 100
    };
  },
  created () {
    this.kk = this.keywords
  },
  mounted () {
    if (this.styleName == 'helpSearch') {
      this.iconColor = '#476bff'
    }
  },

  components: {},
  computed: {},

  methods: {
    changeHandle (e) {
      this.$emit('change', e)
    },
    searchHandle (e) {
      this.$emit('search', e)
    },
    clearHandle (e) {
      this.$emit('clear', e)
    },
    focusHandle (e) {
      this.$emit('focus', e)
    },
    blurHandle (e) {
      this.$emit('blur', e)
    },
    customHandle (e) {
      this.$emit('custom', e)
    },
    jump () {
      this.$emit('click')
    }
  }
}

</script>
<style lang='scss' scoped>
.helpSearch {
  &::v-deep .u-content {
    padding: 0 35rpx;
  }
  &::v-deep .u-input {
    font-size: 32rpx;
    color: #333 !important;
  }
  &::v-deep .u-iconfont {
    font-size: 44rpx !important;
  }
}
</style>